<!-- ThemeToggle.vue -->
<template>
    <el-icon :size="20" @click="toggleTheme">
        <Sunny v-if="isDark" />
        <Moon v-else />
    </el-icon>
</template>

<script setup>
import { ref } from 'vue'
import { Sunny, Moon } from '@element-plus/icons-vue'

// 定义响应式变量，表示当前是否为暗黑主题
const isDark = ref(false)

// 定义切换主题的函数
const toggleTheme = () => {
    isDark.value = !isDark.value
    document.body.classList.toggle('dark-theme', isDark.value)
}
</script>

<style>
/* 样式部分 */
</style>